<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <style>
    /* @import url('https://fonts.googleapis.com/css?family=Lato'); */

    body, html{
      height: 100%;
      /* background: #222222; */
      font-family: 'Lato', sans-serif;
    }
    .container{
      display: block;
      position: relative;
      margin: 40px auto;
      height: auto;
      width: 500px;
      padding: 20px;
    }
    h2 {
      color: #AAAAAA;
    }
    .container ul{
      list-style: none;
      margin: 0;
      padding: 0;
      overflow: auto;
    }
    ul li{
      color: #AAAAAA;
      display: block;
      position: relative;
      float: left;
      width: 100%;
      height: 100px;
      border-bottom: 1px solid #333;
    }
    ul li input[type=radio]{
      position: absolute;
      visibility: hidden;
    }
    ul li label{
      display: block;
      position: relative;
      font-weight: 300;
      font-size: 1.35em;
      padding: 25px 25px 25px 80px;
      margin: 10px auto;
      height: 30px;
      z-index: 9;
      cursor: pointer;
      -webkit-transition: all 0.25s linear;
    }
    ul li:hover label{
      color: #000;
    }

    ul li .check{
      display: block;
      position: absolute;
      border: 5px solid #AAAAAA;
      border-radius: 100%;
      height: 25px;
      width: 25px;
      top: 30px;
      left: 20px;
      z-index: 5;
      transition: border .25s linear;
      -webkit-transition: border .25s linear;
    }
    ul li .check::before {
      display: block;
      position: absolute;
      content: '';
      border-radius: 100%;
      height: 15px;
      width: 15px;
      top: 5px;
      left: 5px;
      margin: auto;
      transition: background 0.25s linear;
      -webkit-transition: background 0.25s linear;
    }
    input[type=radio]:checked ~ .check {
      border: 5px solid #0DFF92;
    }

    input[type=radio]:checked ~ .check::before{
      background: #0DFF92;
    }

    input[type=radio]:checked ~ label{
      color: #0DFF92;
    }
  </style>
  <body>
    <div class="alert">
      <h2>Hey! Read Me...</h2>
      <p>
        This is an example of what you can do with pure css to style radio
        buttons or checkboxes. If you are looking a more flexible & mordern way
        to style radio buttons on forms, take a look at this
        <a
          target="_blank"
          href="https://codepen.io/AngelaVelasquez/details/BWXbxP"
          title="SVG radio buttons"
          >version with SVG icons</a
        >. I also wrote a
        <a
          target="_blank"
          href="https://codepen.io/AngelaVelasquez/post/css-styling-radio-button"
          >post</a
        >
        about it.
      </p>
    </div>

    <div class="container">
      <h2>Your favorite thing in the world:</h2>

      <ul>
        <li>
          <input type="radio" id="f-option" name="selector" />
          <label for="f-option">Pizza</label>

          <div class="check"></div>
        </li>

        <li>
          <input type="radio" id="s-option" name="selector" />
          <label for="s-option">Bacon</label>

          <div class="check"></div>
        </li>

        <li>
          <input type="radio" id="t-option" name="selector" />
          <label for="t-option">Cats</label>

          <div class="check"></div>
        </li>
      </ul>
    </div>

    <div class="signature">
      <p>
        Made with <i class="much-heart"></i> by
        <a href="https://codepen.io/AngelaVelasquez">Angela Velasquez</a>
      </p>
    </div>
  </body>
</html>
